<template>
    <div class="repair-task-detail-layout">
        <div class="task-detail-head-part">
            <div class="divide-line-part"></div>
            <div class="task-device-info">
                <p slot="left">报修设备</p>
                <p v-if="device===null"
                   slot="left"
                   class="left-sp blue-color" @click="addEquipmentHandler">补充</p>
                <div v-else @click="seekEquipmentHandler">
                    <p slot="left" class="left-sp blue-color" style="text-align: left">{{typeNm}}</p>
                    <p slot="left" class="left-sp blue-color" style="text-align: left">{{device}}</p>
                </div>
            </div>

            <div class="task-fault-info">
                <p slot="left">故障类型</p>
                <p slot="left" class="left-sp blue-color">{{faultType}}</p>
            </div>

            <div class="task-detail-content">
                <p slot="left">报修内容</p>
            </div>
            <p slot="left" class="left-sp gray-tint-color" style="text-align: left">{{repairDes}}</p>

            <!--图片显示组件-->
            <ImageShowComponent
                    :imageList="images" class="left-sp bottom-line-part"/>

            <div class="divide-line-part"></div>

            <div class="task-detail-content">
                <p>报修单号：</p>
                <p class="gray-color">{{repairNO}}</p>
            </div>

            <div class="task-detail-content">
                <p>报修机构：</p>
                <p class="gray-color">{{repairInst}}</p>
            </div>

            <div class="task-detail-content bottom-line-part" v-if="purchase_count_confirmed!=='' && purchase_count_confirmed!==0">
                <p>配件更换：</p>
                <p class="blue-color" @click="replaceHandler">查看</p>
            </div>

            <div class="divide-line-part"></div>

            <div class="task-detail-reply bottom-line-part">
                <p>补充描述</p>
                <p v-show="isAddEditState" class="blue-color" @click="addDesHandler">回复</p>
            </div>
        </div>

        <div v-if="messageBoardList.length>0">
            <yd-infinitescroll :callback="loadList" ref="infinitescrollDemo" :distance="10">
                <yd-list theme="4"  slot="list">
                    <div v-for="(item,index) in messageBoardList">
                        <div class="task-detail-scroll-part bottom-line">
                            <div class="task-talk-content">
                                <img :src="qn_domain+item.headImg"
                                     class="img-logo img-radius"
                                     alt="">
                                <div class="left-sp">
                                    <p style="text-align: left">{{item.name}}</p>
                                    <p class="gray-color" style="text-align: left">{{item.created}}</p>
                                    <!--<p style="text-align: left">{{item.describe}}</p>-->
                                    <!--<textarea style="border: 0;text-align: left"-->
                                              <!--readonly="true" v-model="item.describe" ></textarea>-->
                                </div>
                            </div>
                            <div contenteditable="false" readonly="true"  style="text-align: left;padding-left: 1.7rem">{{item.describe}}</div>
                            <div v-if="item.image==='' || item.image=== null" class="talk-image-part">
                            </div>
                            <div v-else class="talk-image-part">
                                <img :src="qn_domain+item.image"
                                     class="talk-img"
                                     alt=""
                                     @click="showPreviewClick(qn_domain+item.image)">
                            </div>
                        </div>
                    </div>
                </yd-list>
            </yd-infinitescroll>
        </div>
        <div v-else>
            <img src="../../assets/task_none_task_icon.png" class="nolist-image" alt="">
            <p  class="nolist-tite">暂无描述内容</p>
        </div>

    </div>
</template>

<script>
    import ImageShowComponent from "@/components/ImageShowComponent.vue";
    import {orderContent,orderMessageBoard} from "../../pcof/post";
    import {userInfoData,bdLatitude,bdLongitude,qn_domain} from '../../globalVariables'
    export default {
        name: "repairTaskDetail",
        data() {
            return {
                // images: [
                //     'http://static.ydcss.com/uploads/ydui/1.jpg',
                //     'http://static.ydcss.com/uploads/ydui/2.jpg',
                //     'http://static.ydcss.com/uploads/ydui/3.jpg'
                // ],
                images: [],
                device: '',
                machine_uuid:'',
                equipUuid: '',
                typeNm: '',
                faultType: '',
                repairDes: '',
                repairNO: '',
                repairInst: '',
                taskUUid: '',
                taskState: '',
                page: 1,
                pageSize: 20,
                serviceTotalPage: 1,
                messageBoardList: [],
                qn_domain: '',
                purchase_count_confirmed: '',
                isAddEditState: true,
                isShowAddDes: true,
            }
        },
        components: {
            ImageShowComponent,
        },
        async created () {
            this.qn_domain = localStorage.getItem(qn_domain);
            //接受上个页面传值 在实例创建完成后被立即调用
            this.taskUUid = this.$route.params.taskUUid;
            this.taskState = this.$route.params.taskState;
            if (this.taskState === '99' || this.taskState === '98' || this.taskState === '97') {
                this.isAddEditState = false;
            } else {
                this.isAddEditState = true;
            }
            this.$dialog.loading.open('加载中...');
            this.orderContentFunc();
            this.orderMessageBoardFunc();
        },
        methods: {
            showPreviewClick(imgUrl) {
                var gallery = weui.gallery(imgUrl,{
                    className: 'custom-classname',
                    onDelete: function () {
                        if (confirm('确定删除该图片？')) {
                            console.log('删除');
                        }
                        gallery.hide(function () {
                            console.log('`gallery` has been hidden');
                        });
                    }
                });
                document.querySelector('.weui-gallery__del').remove();
            },
            async orderContentFunc() {
                var response = await orderContent(JSON.parse(localStorage.getItem(userInfoData)).mobile,this.taskUUid);
                if (response.data.code === 200) {
                    this.$dialog.loading.close();
                    var taskData = response.data.data;
                    this.device = taskData.machineName;
                    this.machine_uuid=taskData.machine_uuid;
                    this.typeNm = taskData.typeNm;
                    this.faultType = taskData.faultType;
                    this.repairDes = taskData.describe;
                    this.repairNO = taskData.order_number;
                    this.repairInst = taskData.instName;
                    this.purchase_count_confirmed = taskData.purchase_count_confirmed;
                    if (taskData.image === "" || taskData.image === null) {

                    } else {
                        var imgList = taskData.image.split(",");
                        var list = [];
                        for (var i = 0;i<imgList.length;i++) {
                            list.push(this.qn_domain+imgList[i]);
                        }
                        this.images = list;
                    }
                    localStorage.setItem(bdLongitude,taskData.longitude);
                    localStorage.setItem(bdLatitude,taskData.latitude);
                } else {
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: response.data.msg,
                        timeout: 1500
                    });
                }
            },
            async orderMessageBoardFunc() {
                var messageBoard = await orderMessageBoard(
                    JSON.parse(localStorage.getItem(userInfoData)).mobile,
                    this.taskUUid, 0, 1, 20);
                if (messageBoard.data.code === 200) {
                    this.messageBoardList = messageBoard.data.data.list;
                    this.serviceTotalPage = messageBoard.data.data.totalPage;
                    if (this.serviceTotalPage > 1) {
                        this.page++;
                    } else {
                        /* 所有数据加载完毕 */
                        this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                        this.page = 1;
                    }
                } else {
                    this.$dialog.toast({
                        mes: messageBoard.data.msg,
                        timeout: 1500
                    });
                }
            },
            //用于补充设备调用微信扫一扫
            addEquipmentHandler() {
                if (this.isAddEditState) {
                    let that = this;
                    wx.ready(function () {
                        wx.scanQRCode({
                            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                            scanType: ["qrCode"], // "qrCode","barCode"可以指定扫二维码还是一维码，默认二者都有
                            success: function (res) {
                                var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                                var obj = JSON.parse(result);
                                that.device = obj.name;
                                that.equipUuid = obj.uuid;
                                // type//0 是不需要关联 从详情页过来 1 是需要关联 详情页过来 2 是可以报修从设备查询页过来
                                that.$router.push({
                                    name: 'equipmentDetailrecord',
                                    params: {equipmentuuid: that.equipUuid, orderUuid: that.taskUUid, type: '1'}
                                });
                            }
                        });
                    });
                }
            },
            //查看设备的详情
            seekEquipmentHandler()
            {
                // type//0 是不需要关联 从详情页过来 1 是需要关联 详情页过来 2 是可以报修从设备查询页过来

                this.$router.push({name: 'equipmentDetailrecord', params: {equipmentuuid: this.machine_uuid,type:'0'}});

            },
            replaceHandler() {
                this.$router.push({name: 'repairReplaceParts',params: {generalUuid: '',taskUUid: this.taskUUid}})
            },
            async loadList() {
                if (this.page > 1) {
                    var response = await orderMessageBoard(
                        JSON.parse(localStorage.getItem(userInfoData)).mobile,
                        this.taskUUid,
                        0,
                        this.page,
                        this.pageSize);
                    if (response.data.code === 200) {
                        const _list = response.data.data.list;
                        this.messageBoardList = [...this.messageBoardList,..._list];
                        if (_list.length < this.pageSize || this.page === this.serviceTotalPage) {
                            /* 所有数据加载完毕 */
                            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                            return;
                        }
                        /* 单次请求数据完毕 */
                        this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

                        this.page++;
                    } else {
                        this.$dialog.toast({
                            mes: response.data.msg,
                            timeout: 1500
                        });
                    }
                } else {
                    /* 所有数据加载完毕 */
                    this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                }
            },
            addDesHandler() {
                this.$router.push({name: 'repairAddDescription',params: {taskUUid: this.taskUUid}});
            }
        }

    }
</script>

<style lang="scss">
    .repair-task-detail-layout {

        .task-detail-head-part {
            padding-top: 1rem;

            .task-device-info {
                display: flex;
                padding-left: 0.3rem;
                padding-right: 0.3rem;
                padding-top: 0.2rem;
                font-size: 1.2em;
            }

            .task-fault-info {
                display: flex;
                padding-left: 0.3rem;
                padding-right: 0.3rem;
                padding-bottom: 0.1rem;
                font-size: 1.2em;
            }

            .task-detail-content {
                display: flex;
                padding-left: 0.3rem;
                padding-right: 0.3rem;
                padding-top: 0.1rem;
                padding-bottom: 0.1rem;
                font-size: 1.2em;

            }

            .task-detail-reply {
                display: flex;
                justify-content: space-between;
                padding-left: 0.3rem;
                padding-right: 0.3rem;
                padding-top: 0.1rem;
                padding-bottom: 0.1rem;
                font-size: 1.2em;
            }
        }

        .task-detail-scroll-part {

            .task-talk-content {
                display: flex;
                padding-left: 0.3rem;
                align-items: center;
                justify-items: center;
                /*padding-right: 0.3rem;*/
                /*padding-top: 0.1rem;*/
                /*padding-bottom: 0.1rem;*/
                font-size: 1.2em;

                .img-radius {
                    border-radius: 0.5rem;
                }
            }

            .talk-image-part {
                display: flex;
                padding-left: 1.7rem;

                .talk-img {
                    width: 1.8rem;
                    height: 1.8rem;
                    object-fit: cover;
                    padding-bottom: 0.1rem;
                }
            }
        }
    }
</style>